<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons/header::#head">
</head>
<script type="text/javascript">
    function changeImg(){
        $('#img').click();
    }

    function sendChange(){
        fileUpload();
    }

    function fileUpload() {
        var formData = new FormData();
        formData.append('img',  $('#img')[0].files[0]);

        if(!validate_img($('#img'))){
            return;
        }

        $.ajax({

            url: 'http://localhost:8090/file/imgUpLoad',
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            beforeSend:function(){

            },

            success:function(data){

                alert(data.msg);
                if(data.code==1){
                    window.location.reload();
                }

            },

            error:function(){

            }

        });

    }


    //限制上传文件的类型和大小
    function validate_img(ele){
        // 返回 KB，保留小数点后两位
        //alert((ele.files[0].size/(1024*1024)).toFixed(2));
        var file = ele.val();
        if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)){

            alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
            return false;
        }else{
            //alert((ele.files[0].size).toFixed(2));
            //返回Byte(B),保留小数点后两位
            if(((ele[0].files[0].size).toFixed(2))>=(2*1024*1024)){

                alert("请上传小于2M的图片");
                return false;
            }else  return true;
        }
        return false;

    }
</script>
<body>
<div class="main-btn"><a id="changeImg" href="#" onclick="changeImg();">更换图片</a></div>
<input type="file" id="img" name="img" style="opacity:0" onchange="sendChange()">
<input type="submit" style="opacity:0" id="send">
</body>
</html>